import React, { useEffect, useRef, useState } from 'react'
import ProForm, { ProFormText, } from '@ant-design/pro-form'
import { Card, message, Switch } from 'antd'
import { editWebConfig, getWebConfigDetail } from '@/services/webconfig'
import ProSkeleton from '@ant-design/pro-skeleton'

const Oss = () => {
  // 把获取到的数据存入状态
  const [configer, setConfiger] = useState(null)

  useEffect(async () => {
    //获取网站配置详情
    const configer = await getWebConfigDetail('oss').then(res => {
      return setConfiger(res.value)
    })

  }, [])

  /**
   * 修改网站配置
   * @param values 表单中输入的数据
   * @returns {Promise<void>}
   */
  const updataWebConfig = async values => {
    /**
     * 定义要修改的字段
     * @type {{cn_name: string, value: {bucket, secret_key, endpoint: *, access_key, is_name: (boolean|*)}}}
     */
    const data = {
      'cn_name': '阿里oss',
      'value': {
        access_key: values.access_key,
        bucket: values.bucket,
        endpoint: values.endpoint,
        is_name: configer.is_name,
        secret_key: values.secret_key,
      }
    }
    /**
     * 执行修改
     * @type {*}
     */
    const response = await editWebConfig('oss', data)
    if (response.status === undefined) {
      message.success('修改成功')
    }
  }
  /**
   * 改变按钮选中或不选中
   * @param checked
   */
  const onChange = (checked) => {
    // 从数据库获取
    configer.is_name = checked
    setConfiger(configer)
  }
  return (
    <div title="输入表单">
      {
        configer === null ?
          <div
            style={{
              background: '#fafafa',
              padding: 24,
            }}
          >
            <ProSkeleton type="list"/>
          </div>
          :
          <Card>
            <ProForm
              onFinish={values => updataWebConfig(values)}
              initialValues={configer}
              submitter={{
                // 配置按钮的属性
                resetButtonProps: {
                  style: {
                    // 隐藏重置按钮
                    display: 'none',
                  },
                },
              }
              }
            >
              <ProFormText
                name="bucket"
                label="bucket"
                colon={true}
                placeholder="请输入名称"
                rules={[{ required: true, message: '请输入bucket' }]}
              />
              <ProFormText
                name="endpoint"
                label="endpoint"
                placeholder="请输入名称"
                rules={[{ required: true, message: '请输入endpoint' }]}
              />
              <ProFormText
                name="access_key"
                label="access_key"
                colon={true}
                rules={[{ required: true, message: '请输入access_key' }]}
                placeholder="请输入名称"
              />

              <ProFormText
                name="secret_key"
                label="secret_key"
                colon={true}
                tooltip="最长为 24 位"
                placeholder="请输入名称"
                rules={[{ required: true, message: '请输入secret_key' }]}
              />
              <ProForm.Item label="是否使用默认域名">
                <Switch
                  defaultChecked={configer.is_name}
                  className={'switch'} name="is_name"
                  onChange={onChange}
                />
              </ProForm.Item>
            </ProForm>
          </Card>

      }

    </div>
  )
}

export default Oss
